<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>径向渐变</title>

        <style>
            /* 盒子的background-image属性可以用radial-gradient（）形式创建径向渐变背景
               background-image：radial-gradient（50% 50%， red，blue）；
                                                圆心坐标
            */

            .box {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                background-image: radial-gradient(50% 50%, red, yellow, blue);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>